<template>
  <el-dialog class="dialog" title="绑定安全设备" center="center" :visible.sync="show" :before-close="hideDialog">
    <div>
      <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
        <el-form-item>
          <el-button type="primary" plain icon="fa fa-chain" @click="handleBinding" size="mini">
            批量绑定
          </el-button>
        </el-form-item>
        <el-form-item prop="equipType">
          <el-select size="mini" v-model="filters.equipType" @change="selectChange">
            <el-option v-for="item in safetyList" :label="item.name" :value="item.id" :key="item.id">

            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
            <el-button size="mini" icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
            <el-button size="mini" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <!-- 列表 -->
    <el-table ref="tableList" :data="dataList" :fit="true" highlight-current-row
              @selection-change="handleSelectionChange" empty-text="对不起，没有找到相关数据！">
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column align="center" label="设备编号" prop="equipCode" width="120">

      </el-table-column>
      <el-table-column align="center" label="设备MAC" prop="equipMac" width="140">

      </el-table-column>
      <el-table-column align="center" label="设备名称" prop="equipName" width="140">
      </el-table-column>
      <!--<el-table-column align="center" label="设备昵称" prop="equipNickName" width="160">
      </el-table-column>-->
      <el-table-column align="center" label="设备类型" width="140">
        <template slot-scope="scope">
          <div>
            {{ formatEquipType(scope.row.equipType) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="在线状态" lign="center" width="100" align="center">
        <template slot-scope="scope">
                    <span>
                        <el-tag size="mini" effect="dark" :type="formatEquipStates(scope.row.equipState)">
                            {{ formatEquipState(scope.row.equipState) }}
                        </el-tag>
                    </span>
        </template>
      </el-table-column>
      <el-table-column label="报警状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.errorState === 0" size="mini" effect="dark" type="success">
            正常
          </el-tag>
          <el-tag v-if="scope.row.errorState === 1" size="mini" effect="dark" type="danger">
            报警
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页工具条 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="page.pageNo" :page-sizes="[20, 50, 100]" :page-size="page.pageSize"
                   layout="total, sizes, jumper, next, pager, prev" :total="page.pageTotal"></el-pagination>
  </el-dialog>
</template>
<script>
  import SafetyApi from "@/api/equip/safety"

  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      beeperId: {
        type: Number | String
      }
    },
    watch: {
      show(val) {
        if (val) {
          this.listData()
        }
      },
    },
    data() {
      return {
        dataList: [],
        filters: {
          equipType: 3
        },
        selectedIds: [],
        page: {
          pageNo: 1,
          pageTotal: 0,
          pageSize: 10
        },
        safetyList: [
          {id: 3, name: "烟雾报警器"},
          {id: 4, name: "燃气报警器"},
          {id: 5, name: "门磁报警器"},
          {id: 6, name: "水浸卫士"},
          {id: 7, name: "摄像头"},
          {id: 8, name: "SOS报警器"},
          {id: 9, name: "跌倒报警器"},
          {id: 10, name: "红外报警器"},
        ]
      }
    },
    components: {},
    methods: {
      handleBinding() {
        if (this.selectedIds.length === 0) {
          this.$message({
            type: "warning",
            message: "请至少选择一项"
          })
          return
        }
        this.$confirm("确定绑定安全设备吗？", "提示", {}).then(res => {
          let params = {
            safetyEquipIds: this.selectedIds,
            beeperId: this.beeperId
          }
          SafetyApi.safetyBatchBinding(params).then(res => {
            this.listData()
            this.$emit("updateSafetyEquip")
            this.$Utils.notifySuccess()
          })
        })


      },
      hideDialog() {
        this.$parent.showSafetyEquip = false
      },
      formatEquipType(type) {
        switch (type) {
          case 2:
            return "接收器"
          case 3:
            return "烟雾报警器"
          case 4:
            return "燃气报警器"
          case 5:
            return "门磁报警器"
          case 6:
            return "水浸卫士"
          case 7:
            return "摄像头"
          case 8:
            return "SOS报警器"
          case 9:
            return "跌倒报警器"
          case 10:
            return "红外报警器"
        }
      },
      formatEquipState(cellValue) {
        if (cellValue === 0) {
          return '未开通'
        } else if (cellValue === 1) {
          return '未激活'
        } else if (cellValue === 2) {
          return '在线'
        } else if (cellValue === 3) {
          return "离线"
        }
      },
      formatEquipStates(cellValue) {
        if (cellValue === 0) {
          return 'danger'
        } else if (cellValue === 1) {
          return ''
        } else if (cellValue === 2) {
          return 'success'
        } else if (cellValue === 3) {
          return 'info'
        }
      },
      resetForm() {
        this.$refs.searchForm.resetFields()
      },
      onSearch() {
        this.page.pageNo = 1;
        this.listData();
      },
      handleSizeChange(size) {
        let _this = this
        _this.page.pageSize = size
        _this.listData()
      },
      handleCurrentChange(val) {
        let _this = this
        _this.page.pageNo = val
        _this.listData()
      },
      handleSelectionChange(arr) {
        this.selectedIds = arr.map(item => item.equipId)
      },
      selectChange() {
        this.listData()
      },
      listData() {
        // 获取列表数据
        let _this = this
        let cond = {
          pageNo: _this.page.pageNo,
          pageSize: _this.page.pageSize,
          isBinding: 1,
          equipType: _this.filters.equipType
        }
        SafetyApi.listSafety(cond)
          .then(res => {
            _this.dataList = res.data.list
            _this.page.pageTotal = res.data.total
            setTimeout(() => {
              _this.$refs.tableList.doLayout()
            })
          }).catch(err => {
        })

      },
    }
  }
</script>

<style lang="scss" scoped>
  .dialog {
    &::v-deep .el-dialog {
      width: max-content;
    }

    .el-radio-group {
      margin-left: 10px;

      .el-radio {
        margin-right: 20px;
      }
    }

    .img-wrapper {
      width: 80px;
      height: 60px;
      overflow: hidden;
      border-radius: 3px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;

      .el-image {
        width: 100%;

        &::v-deep img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
</style>

